<template>
    <div class="collect_goods">
        <div class="head">
            <ol class="operate">
                <li class="screen" v-if="!ifGrabble">
                    <span class="status" @click="changeStatu(!statuBool, statu)">
                        {{statu}}
                        <i class="icon iconfont icon-xiajiantou" v-if="!statuBool"></i>
                        <i class="icon iconfont icon-shangjiantou" v-if="statuBool"></i>
                    </span>
                    <div class="statu_pop" v-if="statuBool">
                        <span class="pop_l" v-for="(i, k) in options" :key="k" @click="changeStatu(!statuBool, i.label, i.value)">{{i.label}}</span>
                    </div>
                </li>
                <li class="search" v-if="ifGrabble">
                    <div class="inp">
                        <i class="icon iconfont icon-sousuo f32"></i>
                        <input type="text" placeholder="输入搜索内容" v-model="antistop">
                    </div>
                    <div class="btn">
                        <span @click="grabble(1, true)">搜索</span>
                        <span @click="grabble(2, false)">取消</span>
                    </div>
                </li>
                <li class="handle" v-if="!ifGrabble">
                    <span @click="grabble(2, true)" class="f32">
                        <i class="icon iconfont icon-sousuo f32"></i>
                    </span>
                    <span @click="redact(true)">{{oper}}</span>
                </li>
            </ol>
        </div>
        <div class="goods_cont">
            <div class="xuan on" v-for="(item, index) in list" :key="index" v-if="period">
                <input type="checkbox" v-model="checked" :value="item.favoriteId" @click="choose(item.favoriteId)" v-if="operBool">
                <goods-list :item="item"/>
            </div>
            <div class="without" v-if="!period">
                <p class="without_one f24">没有搜索结果</p>
                <p class="without_two f20">没有找到相关开运好物</p>
            </div>
        </div>
        <div class="all_check" v-if="operBool">
            <input type="checkbox" @click="checkAll" v-model="checkall">
            <span>全选</span>
            <button class="btn">删除</button>
        </div>
    </div>
</template>

<script>
    import goodsList from '@/components/goodsList'
    export default {
        name: 'collectgoods',
        components: {
            goodsList,
        },
        data() { 
            return {
                list: [],
                checkall: false,
                checked: [],
                options: [{
                    value: "0",
                    label: '已下架'
                    }, {
                    value: "1",
                    label: '正常'
                }],
                oper: '编辑',
                operBool: false,
                ifGrabble: false,
                statu: '商品状态',
                statuBool: false,
                antistop: '',
                statuId: '',
                period: true,
            }
        },
        methods: {
            changeStatu(bool, name, id) {
                this.statuBool = bool
                this.statu = name
                this.statuId = id
                if(this.statuId == 0 || this.statuId == 1){
                    if(this.$store.state.isMaster){
                        this.masterFavoriteGoodsList()
                    } else {
                        this.getGoodsList();
                    }
                }
            },
            getGoodsList() {
                let params = {
                    favoriteType: 0,
                    userId: this.$store.state.userId,
                    key: this.antistop == '商品状态' ? '' : this.antistop,
                    status: this.statuId == '' ? '' : this.statuId
                }
                this.$http.fetchGet('myfavoritelist', params).then((res) => {
                    if(res.code == 200){
                        this.list = res.data.root;
                        if(res.data.total == 0) {
                            this.period = false
                        } else {
                            this.period = true
                        }
                    } else {
                        console.log(res.msg)
                    }
                }, (err) => {
                    console.log(err)
                })
            },
            masterFavoriteGoodsList() {
                let params = {
                    masterId: '50',
                    offset: '0',
                    limit: '10',
                    keyword: this.antistop == '商品状态' ? '' : this.antistop,
                    status: this.statuId == '' ? '' : this.statuId
                }
                this.$http.fetchGet('masterFavoriteGoodsList', params).then(res => {
                    if(res.code == 200) {
                        this.list = res.data;
                    } else {
                        console.log(res.msg)
                    }
                }, err => {

                })
            },
            checkAll() {
                var _this = this
                if (this.checkall) { // 实现反选
                    this.checked = []
                } else { // 实现全选
                    this.checked = []
                    this.list.forEach(function (item) {
                        _this.checked.push(item.favoriteId)
                    })
                }
                if (this.checked.length === this.list.length) {
                    this.checkall = true
                }
            },
            choose(id) {
                if(this.checked.indexOf(id) !== -1) {
                    let ind = this.checked.indexOf(id);
                    this.checked.splice(ind, 1);
                } else {
                    this.checked.push(id)
                }
                if (this.checked.length == this.list.length) {
                    this.checkall = true
                } else {
                    this.checkall = false
                }
            },
            redact(bool) {
                if(this.oper == '编辑') {
                    this.oper = '完成'
                    this.operBool = true
                } else {
                    this.oper = '编辑'
                    this.operBool = false
                }
            },
            grabble(type, bool) {
                if(type == 1) {
                    this.ifGrabble = bool
                    if(this.$store.state.isMaster){
                        this.masterFavoriteGoodsList()
                    } else {
                        this.getGoodsList();
                    }
                } else {
                    this.ifGrabble = bool
                }
            }
        },
        mounted() {
            if(this.$store.state.isMaster){
                this.masterFavoriteGoodsList()
            } else {
                this.getGoodsList();
            }
        }
    }
</script>

<style lang="less" scoped>
    .collect_goods{
        box-sizing: border-box;
        background: #f2f2f2;
        .pt(88);
        .head{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            .h(88);
            border-bottom: 1px solid #f2f2f2;
            z-index: 9;
            .operate{
                .h(88);
                width: 100%;
                display: flex;
                .lh(88);
                padding: 0 20px;
                box-sizing: border-box;
                background: #fff;
                .screen{
                    flex: 1;
                    .status{
                        margin-left: 60px;
                        position: relative;
                        .lh(88);
                        display: inline-block;
                    }
                    .statu_pop{
                        position: absolute;
                        left: 30px;
                        background: #fff;
                        .w(200);
                        height: auto;
                        border-radius: 10px;
                        box-shadow: 1px 1px 10px #ccc;
                        .pop_l{
                            display: block;
                            .lh(88);
                            text-align: center;
                            margin-left: 0;
                        }
                    }
                }
                .search{
                    display: flex;
                    width: 100%;
                    .inp{
                        flex: 1;
                        position: relative;
                        input{
                            width: 100%;
                            .h(64);
                            border: none;
                            border: 1px solid #999;
                            border-radius: 10px;
                            .pl(60);
                            box-sizing: border-box;
                        }
                        i.icon{
                            position: absolute;
                            left: 10px;
                        }
                    }
                    .btn{
                        .w(160);
                        span{
                            .ml(28);
                            &:nth-child(1){
                                color: #333;
                            }
                            &:nth-child(2){
                                color: #666;
                            }
                        }
                    }
                }
                .handle{
                    flex: 1;
                    text-align: right;
                    padding-right: 20px;
                    span{
                        .ml(20);
                    }
                }
            }
        }
        .add_check{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            .h(88);
            .lh(88);
        }
        .goods_cont{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            background: #fff;
            .mt(20);
            .xuan{
                position: relative;
                z-index: 1;
                input[type=checkbox]{
                    position: absolute;
                    top: 45%;
                    left: 10px;
                    .w(24);
                    .h(24);
                    background: blue;
                    border: none;
                }
            }
            .on {
                .pl(20);
            }
            .without{
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 40px;
                margin-top: 50%;
                .without_one{
                    .lh(40);
                    color: #333;
                }
                .without_two{
                    .lh(40);
                    color: #999;
                }
            }
        }
        .all_check{
            position: absolute;
            bottom: 0px;
            background: #f2f2f2;
            .h(88);
            width: 100%;
            .lh(88);
            .pl(24);
            box-sizing: border-box;
            input{
                .w(24);
                .h(24);
            }
            .btn{
                .w(140);
                .h(50);
                border: none;
                border: 1px solid #189beb;
                color: #189beb;
                border-radius: 10px;
                background: #f2f2f2;
                position: absolute;
                right: 20px;
                top: 20px;
            }
        }
    }
    
</style>
